<template>
	<div class="workorder-split">
		<el-card>
			<div class="toolbar">
				<el-input v-model="filters.keyword" placeholder="搜索工单号/产品" clearable style="width:200px" />
				<el-button type="primary" @click="openSplitDialog">工单拆分</el-button>
				<el-button type="warning" @click="openMergeDialog" :disabled="selectedRows.length < 2">工单合并</el-button>
			</div>
			<el-table :data="filteredOrders" border size="small" style="margin-bottom:18px;" row-key="id"
				@selection-change="onSelectionChange" ref="orderTableRef">
				<el-table-column type="selection" width="46" />
				<el-table-column prop="orderNo" label="工单编号" width="120" />
				<el-table-column prop="product" label="产品名称" width="140" />
				<el-table-column prop="quantity" label="数量" width="80" />
				<el-table-column prop="status" label="状态" width="90">
					<template #default="scope">
						<el-tag
							:type="scope.row.status === '已完成' ? 'success' : (scope.row.status === '生产中' ? 'warning' : 'info')">
							{{ scope.row.status }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="planStart" label="计划开始" width="110" />
				<el-table-column prop="planEnd" label="计划结束" width="110" />
				<el-table-column prop="remark" label="备注" />
			</el-table>
		</el-card>

		<!-- 拆分工单弹窗 -->
		<el-dialog v-model="splitDialog.visible" title="工单拆分" width="700px">
			<div>
				<div>被拆分工单号：<b>{{ splitDialog.data.orderNo }}</b></div>
				<el-table :data="splitDialog.splits" size="small" border style="margin-top:10px;">
					<el-table-column prop="childNo" label="子工单号" width="120" />
					<el-table-column prop="quantity" label="数量" width="140">
						<template #default="scope">
							<el-input-number v-model="scope.row.quantity" :min="1" :max="splitDialog.data.quantity"
								size="small" />
						</template>
					</el-table-column>
					<el-table-column prop="planStart" label="开始时间" width="160">
						<template #default="scope">
							<el-date-picker v-model="scope.row.planStart" type="date" size="small"
								value-format="YYYY-MM-DD" />
						</template>
					</el-table-column>
					<el-table-column prop="planEnd" label="结束时间" width="160">
						<template #default="scope">
							<el-date-picker v-model="scope.row.planEnd" type="date" size="small"
								value-format="YYYY-MM-DD" />
						</template>
					</el-table-column>
				</el-table>
				<el-button style="margin-top:8px;" @click="addSplitRow">添加子工单</el-button>
			</div>
			<template #footer>
				<el-button @click="splitDialog.visible = false">取消</el-button>
				<el-button type="primary" @click="doSplit">确认拆分</el-button>
			</template>
		</el-dialog>

		<!-- 合并工单弹窗 -->
		<el-dialog v-model="mergeDialog.visible" title="工单合并" width="420px">
			<div>
				<div>被合并工单数：<b>{{ mergeDialog.orders.length }}</b></div>
				<div>合并后工单号：<b>{{ mergeDialog.newOrder.orderNo }}</b></div>
				<el-form :model="mergeDialog.newOrder" label-width="72px" style="margin-top:10px;">
					<el-form-item label="产品">
						<el-input v-model="mergeDialog.newOrder.product" />
					</el-form-item>
					<el-form-item label="数量">
						<el-input-number v-model="mergeDialog.newOrder.quantity" :min="1" />
					</el-form-item>
					<el-form-item label="计划开始">
						<el-date-picker v-model="mergeDialog.newOrder.planStart" type="date" value-format="YYYY-MM-DD"
							placeholder="选择日期" style="width: 100%;" />
					</el-form-item>
					<el-form-item label="计划结束">
						<el-date-picker v-model="mergeDialog.newOrder.planEnd" type="date" value-format="YYYY-MM-DD"
							placeholder="选择日期" style="width: 100%;" />
					</el-form-item>

					<el-form-item label="备注">
						<el-input v-model="mergeDialog.newOrder.remark" />
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<el-button @click="mergeDialog.visible = false">取消</el-button>
				<el-button type="primary" @click="doMerge">确认合并</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 工单数据模拟
const orders = ref([
	{ id: 1, orderNo: 'WO-202406001', product: '头孢曲松钠注射液', quantity: 1000, status: '生产中', planStart: '2024-06-10', planEnd: '2024-06-12', remark: '常规订单' },
	{ id: 2, orderNo: 'WO-202406002', product: '阿莫西林胶囊', quantity: 800, status: '生产中', planStart: '2024-06-11', planEnd: '2024-06-14', remark: '急单' },
	{ id: 3, orderNo: 'WO-202406003', product: '葡萄糖注射液', quantity: 600, status: '待下达', planStart: '2024-06-12', planEnd: '2024-06-16', remark: '' },
	{ id: 4, orderNo: 'WO-202406004', product: '布洛芬缓释胶囊', quantity: 450, status: '已完成', planStart: '2024-06-08', planEnd: '2024-06-09', remark: '' },
	{ id: 5, orderNo: 'WO-202406005', product: '维生素C片', quantity: 1000, status: '待下达', planStart: '2024-06-13', planEnd: '2024-06-18', remark: '促销订单' },
	{ id: 6, orderNo: 'WO-202406006', product: '氯化钠注射液', quantity: 700, status: '已完成', planStart: '2024-06-07', planEnd: '2024-06-08', remark: '' },
	{ id: 7, orderNo: 'WO-202406007', product: '盐酸多巴胺注射液', quantity: 520, status: '待下达', planStart: '2024-06-13', planEnd: '2024-06-15', remark: '' },
	{ id: 8, orderNo: 'WO-202406008', product: '阿司匹林肠溶片', quantity: 950, status: '生产中', planStart: '2024-06-14', planEnd: '2024-06-16', remark: '' },
	{ id: 9, orderNo: 'WO-202406009', product: '对乙酰氨基酚片', quantity: 880, status: '生产中', planStart: '2024-06-13', planEnd: '2024-06-17', remark: '' },
	{ id: 10, orderNo: 'WO-202406010', product: '维生素B1片', quantity: 730, status: '待下达', planStart: '2024-06-12', planEnd: '2024-06-14', remark: '客户加急' },
	{ id: 11, orderNo: 'WO-202406011', product: '硫酸镁注射液', quantity: 640, status: '已完成', planStart: '2024-06-06', planEnd: '2024-06-07', remark: '' },
	{ id: 12, orderNo: 'WO-202406012', product: '甲硝唑片', quantity: 780, status: '生产中', planStart: '2024-06-13', planEnd: '2024-06-15', remark: '' },
	{ id: 13, orderNo: 'WO-202406013', product: '青霉素V钾片', quantity: 890, status: '生产中', planStart: '2024-06-14', planEnd: '2024-06-18', remark: '' },
	{ id: 14, orderNo: 'WO-202406014', product: '氯雷他定片', quantity: 660, status: '待下达', planStart: '2024-06-15', planEnd: '2024-06-18', remark: '' },
	{ id: 15, orderNo: 'WO-202406015', product: '奥美拉唑肠溶胶囊', quantity: 550, status: '生产中', planStart: '2024-06-15', planEnd: '2024-06-19', remark: '常规订单' }
])


const filters = ref({ keyword: '' })

const filteredOrders = computed(() => {
	if (!filters.value.keyword) return orders.value
	return orders.value.filter(
		o => o.orderNo.includes(filters.value.keyword) || o.product.includes(filters.value.keyword)
	)
})

// 多选
const selectedRows = ref([])
function onSelectionChange(val) {
	selectedRows.value = val
}

// --- 拆分 ---
const splitDialog = ref({
	visible: false,
	data: {},
	splits: []
})
function openSplitDialog() {
	const sel = selectedRows.value.length ? selectedRows.value[0] : orders.value[0]
	splitDialog.value.data = { ...sel }
	splitDialog.value.splits = [
		{
			childNo: sel.orderNo + '-A',
			quantity: Math.floor(sel.quantity / 2),
			planStart: sel.planStart,
			planEnd: sel.planEnd
		},
		{
			childNo: sel.orderNo + '-B',
			quantity: sel.quantity - Math.floor(sel.quantity / 2),
			planStart: sel.planStart,
			planEnd: sel.planEnd
		}
	]
	splitDialog.value.visible = true
}
function addSplitRow() {
	splitDialog.value.splits.push({
		childNo: splitDialog.value.data.orderNo + '-' + String.fromCharCode(65 + splitDialog.value.splits.length),
		quantity: 1,
		planStart: splitDialog.value.data.planStart,
		planEnd: splitDialog.value.data.planEnd
	})
}
function doSplit() {
	// 将所有子工单插入到列表顶部
	splitDialog.value.splits.forEach(child => {
		orders.value.unshift({
			id: Date.now() + Math.random(), // 保证唯一
			orderNo: child.childNo,
			product: splitDialog.value.data.product,
			quantity: child.quantity,
			status: '待下达',
			planStart: child.planStart,
			planEnd: child.planEnd,
			remark: '由' + splitDialog.value.data.orderNo + '拆分'
		})
	})
	// 删除被拆分的原工单
	orders.value = orders.value.filter(o => o.id !== splitDialog.value.data.id)
	splitDialog.value.visible = false
	selectedRows.value = []
}


// --- 合并 ---
const mergeDialog = ref({
	visible: false,
	orders: [],
	newOrder: { orderNo: '', product: '', quantity: 0, remark: '' }
})
function openMergeDialog() {
	if (selectedRows.value.length < 2) return
	const ids = selectedRows.value.map(o => o.id)
	const orderNo = 'WO-MERGE-' + Date.now().toString().slice(-5)
	const product = selectedRows.value.map(o => o.product).join('/')
	const quantity = selectedRows.value.reduce((sum, o) => sum + o.quantity, 0)
	mergeDialog.value.orders = [...selectedRows.value]
	mergeDialog.value.newOrder = { orderNo, product, quantity, remark: '' }
	mergeDialog.value.visible = true
}
function doMerge() {
	// 将合并后的新工单插入最前面
	orders.value.unshift({ ...mergeDialog.value.newOrder, id: Date.now(), status: '待下达'})
	// 删除被合并的原订单
	const mergeIds = mergeDialog.value.orders.map(o => o.id)
	orders.value = orders.value.filter(o => !mergeIds.includes(o.id))
	mergeDialog.value.visible = false
	selectedRows.value = []
}

</script>

<style scoped>
.workorder-split {
	padding: 16px;
}

.toolbar {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
</style>
  
